<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>

<div id="app">
    <el-button type="warning" @click="dialogRoleFormVisible = true" style="margin-left: 350px">添加下级部门</el-button>
    <el-button type="danger" @click="handleDelete" v-model="id">删除下级部门</el-button>

    <el-container style="height: 700px; border: 1px solid #eee">

        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-tree
                    :data="departments"
                    node-key="id"
                    ref="tree"
                    highlight-current
                    :props="defaultProps"
                    @node-click="check">
            </el-tree>
        </el-aside>



        <el-container>
            <el-dialog title="添加下级部门" :visible.sync="dialogRoleFormVisible" @close="closeDialog">
                <el-form :model="form">
                    <el-form-item label="部门编号">
                        <el-input v-model="form.dpId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="savetDp">确 定</el-button>
                </div>
            </el-dialog>







            <el-main>
                <el-form ref="form" :model="forms" label-width="80px">
                    <el-form-item label="父类编号">
                        <el-input v-model="forms.pid"></el-input>
                    </el-form-item>
                    <el-form-item label="企业编号">
                        <el-input v-model="forms.cid"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称">
                        <el-input v-model="forms.dname"></el-input>
                    </el-form-item>
                    <el-form-item label="部门编号">
                        <el-input v-model="forms.dno"></el-input>
                    </el-form-item>
                    <el-form-item label="部门经理">
                        <el-input v-model="forms.dmanager"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="forms.dphone"></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话">
                        <el-input v-model="forms.dtel"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="forms.demail"></el-input>
                    </el-form-item>
                    <!--                        <el-form-item label="部门职位">-->
                    <!--                            <el-select v-model="form.cid" placeholder="请选择职位">-->
                    <!--                                <el-option label="区域一" value="shanghai"></el-option>-->
                    <!--                            </el-select>-->
                    <!--                        </el-form-item>-->
                    <el-form-item label="部门简介">
                        <el-input type="textarea" v-model="form.dintro"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="savetDepartment">立即增加</el-button>
                        <el-button @click="closeDialog">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-main>

        </el-container>
    </el-container>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            departments:[],
            defaultProps: {
                children: 'tdps',
                label: 'dname'
            },
            form:{},
            forms:{},
            dialogFormVisible:false,
            dialogRoleFormVisible:false,
            id:{}



        },

        methods: {
            loadTDepartments(){
                axios.get("/tDepartments")
                    .then(res=>{
                        this.departments = res.data
                        this.departments.forEach(dep=>{
                            dep.tdps.forEach(tdp=>{
                                tdp['dname']=tdp.name;

                            })
                        })
                    });
            },
            check(data){
                this.form.dpId= data.id
                this.id = data.id

                console.log(data)
                console.log(this.id)
            },
            handleDelete() {
                axios.delete("/tdp/"+this.id)
                    .then(res=>{
                        if(res.data==="ok"){
                            this.$message("删除子部门成功")
                        }
                    })
                this.loadTDepartments();
            },

            closeDialog(){
                this.form={id:0}
            },

            savetDp(){
                let tdps = JSON.parse(JSON.stringify(this.form));
                axios.post("/tdp",tdps)
                    .then(res=>{
                        if (res.data==="ok"){
                            this.dialogRoleFormVisible = false;
                            this.$message("添加下级部门成功！");
                            this.loadTDepartments();
                        }
                    })


            },

            savetDepartment(){
                let tDepartment = JSON.parse(JSON.stringify(this.forms));
                axios.post("/tDepartment",tDepartment)
                    .then(res=>{
                        if (res.data==="ok"){
                            this.dialogRoleFormVisible = false;
                            this.$message("添加部门成功！");
                            this.loadTDepartments();
                        }
                    })


            },


        },

        mounted(){
            this.loadTDepartments();
        }
    })
</script>

</body>
</html>